<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../../css/hyl.css" rel="stylesheet" />
		<link href="../../cssmui/mui.min.css" rel="stylesheet" />
		<link href="../../cssmui/mui.picker.min.css" rel="stylesheet" />
		<script src="../../hyl/util/core.js"></script>
		<script src="../../hyl/mui/mui.js"></script>
		<script src="../../hyl/mui/mui.picker.all.js"></script>
		<script src="../../js/vue.min2.6.10.js"></script>
		<script src="../../dbm/designsql.js"></script>
		<script src="../../hyl/util/core.js"></script>
		<script src="../../hyl/plus/sqlite.web.js"></script>
		<script src="../../hyl/plus/storage.js"></script>
		<script src="../../hyl/md/sql-modeldata.js"></script>
		<script src="../dao/dict_dao.js"></script>
		<script src="../dao/user_dao.js"></script>
		<style>
			html,body {
height: 100%;
overflow: hidden;
}

.mui-bar {
-webkit-box-shadow: none;
box-shadow: none;
}
.mui-table-view-divider {
color: #008000
}
.index-list {
position: relative;
width: 100%;
height: 100%;		
overflow: auto;	
cursor: default;
padding-bottom:50px;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
.index-list-wrap {
margin: 0px;
padding: 0px;
border: none;
height: 100%;
overflow-x: hidden;

}
.index-group {
padding-bottom: 15px;
}
.index-group-title {
height: 30px;
line-height: 30px;
padding-left: 20px;
color: #fff;
background: #5CADAD;
}
.index-group-item {
display: flex;
line-height: 20px;
align-items: center;
padding: 5px 0px 5px 20px;
list-style: none;
 transform: translateX(0);
 transition: all .3s; /*滑动效果更生动*/
   position: relative;
}
.index-group-item:hover{
background-color: #ffffff;
}
.index-group-item .avatar {
width: 50px;
height: 50px;
border-radius: 50%;
}
.index-group-item .name {
margin-left: 20px;
color: rgba(0, 0, 0, 0.5);
line-height: 20px;
font-size: 14px;
}
.index-item-ext {
	display: inline-flex;
	position: absolute;
  top: 0;
  left: -1px;
  z-index: 3;
  width: 60px;
  height: 100%;
  transform: translateX(-60px); /*默认x轴位移60px，使其隐藏*/	
}
.move {
  transform: translateX(60px); /*滑动后x轴位移-60px,使其可见*/
}
.index-item-ext .bt1 {
  width: 100%;
	height: 100%;
	padding-top: 25%;
  text-align:center;
	background: #CEFFCE	
 }
.index-nav {
position: absolute;
right: 0;
top: 50%;
z-index: 100;
width: 20px;
padding: 20px 0;
text-align: center;
border-radius: 10;
background: #B3D9D9;
transform: translateY(-50%);
}
.index-nav .nav-item {
padding: 3px;
font-size: 12px;
color: #C4E1E1;
list-style: none;
}
.index-nav .nav-item.active {
color: #D1E9E9;
}
.index-indicator {
position: absolute;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
line-height: 50px;
background: #3D7878;
color: #fff;
font-size: 22px;
border-radius: 5px;
pointer-events: none;
}
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,.fade-leave-to {
opacity: 0;
}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">联系人列表</h1>
			<a class="btn-new mui-icon mui-icon-plusempty mui-pull-right"></a>
		</header>
		<div id="el" class=" mui-content index-list" v-cloak>
			<ul class="index-list-wrap" ref="indexWrap" @scroll="onListWrapScroll">
				<li v-for="(group,field,index1) in list" class="index-group" :key="field" ref="indexGroup">
					<h3 class="index-group-title"><strong>{{field}}</strong></h3>
					<ul>
						<li v-for="(user,index2) in group">
							<div @click.prevent="selectItem(index1,index2)" class="index-group-item " :class="{move:isselect(index1,index2)}">
								<img :src="user.avatar" class="avatar" alt="">
								<span class="name">{{user.name}}</span>
								<div class="index-item-ext mui-row">
									<div class="bt1 mui-icon mui-icon-compose" @click="onClickItem($event,user)"> </div>
								</div>
							</div>
						</li>
					</ul>
				</li>
			</ul>
			<div class="index-nav">
				<ul>
					<li v-for="(item,index) in indexList" @touchstart.prevent="onTouchStartIndex(index)" class="nav-item" :class="{'active':currentIndex===index}">{{item}}</li>
				</ul>
			</div>
			<transition name="fade">
				<div class="index-indicator" v-show="moving">{{currentIndicator}}</div>
			</transition>
			<div id="popover1" class="mui-popover">
					<ul class="mui-table-view">
						<li  v-for="(item,index) in dictusertype" class="mui-table-view-cell" @click.stop="onNavClick(item.value,$event)">	<span class="mui-tab-label">{{item.text}}</span></li>
			<li  class="mui-table-view-cell" @click.stop="onNavClick(-1,$event)">	<span class="mui-tab-label">其他</span></li>
					</ul>
				</div>
		</div>
		<nav class="mui-bar mui-bar-tab">
			<a id="w1" type="button" class="mui-tab-item " href="#popover1">分组</a>
			<a id="w2" type="button" class="mui-tab-item " href="#popover2">状态</a>			
		</nav>
		<div id="popover2" class="mui-popover">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell"><a href="2">所有</a></li>
				<li class="mui-table-view-cell"><a href="1">有效</a></li>
				<li class="mui-table-view-cell"><a href="0">无效</a></li>
			</ul>
		</div>
	
	</body>

</html>

<script src="../../hyl/page-muiIni.js"></script>
<script type="text/javascript">
	//--------------------定义--------------------
	var targetTab = ['contact_info.html'];
	var _queryrs = null; //列表数据

	var _request = _Fun.m.concat(app._request, {
		opentype: '',
		wheres: ['', ''] //条件区域提前预设好
	}); //工作模式 sel 表示选择模式
	var userDao = new user_dao(_mydb_);
	app.vueobj = null;
	var INDICATOR_INDURATION = 1000
	var TITLE_HEIGHT = 50

	//console.log(" app._request", _request)
	//-----------------刷新数据--------------------
	function createvue(vlist) {
		if (app.vueobj) return app.vueobj;
		app.vueobj = new Vue({
			el: '#el',
			data: {
				dictusertype: _Dict.CrowdType,
				list: vlist || [],
				currentIndex: 0, //选中项的索引
				timer:null,//防止频繁触发移动事件 的定时任务
				listHeight:[],//列表项集合的高度
				scrollTimer:null,//防止频繁触犯滚动事件 的定时任务
				moving: false, //滚动条移动时显示
				currentIndicator: '', //当前索引字符
				clientNum: {}, // 记录开始滑动（x1）,结束滑动（x2）的鼠标指针的位置
				candelete: '', // 滑动的item
			},
			computed: {
				indexList() {
					var arr = [];
					for (var k in this.list) {
						arr.push(k);
					}
					//console.log('computed.indexList', arr);
					return arr;
				}
			},
			created() {
				this.listHeight = []
				this.timer = null
				this.scrollTimer = null
			},
			mounted() {
				this._calculateHeight();
			},
			watch: {
				currentIndex(newVal) { //当前索引改变时,弹出
					clearTimeout(this.timer)
					this.currentIndicator = this.indexList[this.currentIndex]
					this.moving = true
					this.timer = setTimeout(() => {
						this.moving = false
					}, INDICATOR_INDURATION)
				}
			},
			methods: {
				isselect(i1, i2) {
					return this.candelete == (i1 + '_' + i2);
				},
				selectItem(i1, i2) {
					if (this.candelete == '')
						this.candelete = i1 + '_' + i2;
					else
						this.candelete = '';
				},
				_calculateHeight() {
					//console.log('_calculateHeight')
					this.listHeight = []
					var listref = this.$refs.indexGroup;
					var height = 0
					this.listHeight.push(height)
					for (var i = 0; i < listref.length; i++) {
						var item = listref[i]
						height += item.clientHeight
						this.listHeight.push(height)
					}
				},
				//点击右侧索引项
				onTouchStartIndex(index) {
					this.currentIndex = index
					this.$refs.indexWrap.scrollTop = this.listHeight[index]
				},
				//点击选中项
				onClickItem(e, item) {
					//console.log('onClickItem', e, item)
					var data = {
						id: item.id
					};
					app.open(targetTab[0], data)
					//this.$emit('choose', item)
				},
				//滚动时同步标记左边选中项
				onListWrapScroll(e) {
					clearTimeout(this.scrollTimer); //防止太快操作
					this.scrollTimer = setTimeout(() => {
						var scrollTop = this.$refs.indexWrap.scrollTop;
						var listHeight = this.listHeight
						for (let i = 0; i < listHeight.length - 1; i++) {
							if (
								scrollTop <= listHeight[i + 1] - TITLE_HEIGHT &&
								scrollTop >= listHeight[i]
							) {
								this.currentIndex = i;
								return;
							}
						}
					}, 100)
				},
				onNavClick(ind,e) {
					//console.log('onNavClick')
						var text = e.target.innerHTML;
					if (ind > 0) {
						_request.wheres[1] = " cgroup= " + ind;
						refresh();
					} else if (ind < 0) {
						_request.wheres[1] = " (cgroup is null or cgroup=0)";
						refresh();
					} else {
						_request.wheres[1] = "";
						refresh();
					}
					mui("#w1")[0].innerHTML = text;
					mui("#popover1").popover('toggle');		
				}
			},
			destroyed() {
				clearTimeout(this.timer)
				clearTimeout(this.scrollTimer)
			},
		});
		return app.vueobj;
	}
	//事件回调
	function afterWindowAck(e) {
		//console.log("afterWindowAck", e);
		if (e.detail.code == 1) {
			refresh();
		}
	}
	//open监听
	function afterPlusReady() {
		mui("header").on("tap", ".btn-new", function() {
			app.open(targetTab[0], {
				action: 'new'
			}); //新增	
		});
		mui("#popover2").on("tap", "a", function() {
			var value = this.getAttribute("href")
			var text = this.innerHTML;
			if (value == 1) {
				_request.wheres[0] = " s1=1 ";
			} else if (value == 0) {
				_request.wheres[0] = " (s1=0 or s1 is null)";
			} else {
				_request.wheres[0] = "";
				_request.wheres[1] = "";
			}
			mui("#w2")[0].innerHTML = text;
			mui("#popover2").popover('toggle');		
			refresh();
		});
		if (_request.opentype == 'sel') {
			document.body.querySelector('nav').style.display = 'none';
		}
		userDao.MD.where(_request.wheres).getList(function(rs, sql) {
			var li = rs2Data(rs);
			//console.log('inin')
			createvue(li);
		});
	}

	function refresh() {
		userDao.MD.where(_request.wheres).getList(function(rs, sql) {
			var li = rs2Data(rs);
			app.vueobj.list = li;
		});
	}

	function fromData2Item(rs) {
		var user = {}
		user.ch = rs.uname.substring(0, 1) || 'v'
		user.value = rs.py
		user.id = rs.id
		user.name = rs.uname
		user.cgname = rs.text
		user.avatar = rs.uimg || '../../hyl/img/user-photo.png'
		return user;
	}
	//数据写入html
	function rs2Data(rs) {
		var gdata = {}
		//	log(rs, 'contact_list115')
		//排序数据
		for (var i = 0; i < rs.length; i++) {
			var user = fromData2Item(rs[i]);
			if (user.ch in gdata) {
				gdata[user.ch].push(user)
			} else {
				var arr = []
				arr.push(user);
				gdata[user.ch] = arr
			}
		}
		return gdata;
	}
</script>
<script src="../../hyl/pageStart.js"></script>
